<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/productList.css">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		document.title = "产品列表";

		var app = new Vue({
			el: '#container',
			data: {
				productList: [],
			},
			methods: {
				productDetail: function(id) {
					window.location.href = "/wechat/product/detail/id/"+id;
				},
				booking: function(id) {
					window.location.href = "/wechat/booking/index/id/"+id;
				},
				order: function(id) {
					window.location.href = "/wechat/order/index/id/"+id;
				}
			}
		})

		function getProductList(categoryId) {

			$.ajax({
				url:"/wechat/product/productList",
				type:"post",
				data:{
					categoryId: categoryId
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					app.productList = data;
				},
			})
		}
        $(".search-box").change(function() {
            var value = $(this).find("option:selected").text();
            $(this).prev().attr('placeholder',value);
        });


        $("select[name=categoryId]").change(function() {

			var categoryId = $(this).val();

			getProductList(categoryId);

		});

		getProductList("{$categoryId}");

		var value = $("select[name=categoryId]").find("option:selected").text();
		$("select[name=categoryId]").prev().attr('placeholder',value);

	});


</script>

<div class="container">
	<div class="head-search">
		<span class="disease">病症：</span>
		<img class="icon-arrow" src="/Template/images/icon-arrow.png" alt="">
		<input class="search-line" type="text" placeholder="请选择所对应的症状" readonly>
		<select class="search-box" name="categoryId">
			<option value="0" class="choose">请选择所对应的症状</option>
			{:getCategorySelectOptionHtml($categoryId, 0)}
		</select>
	</div>
	<div class="no-data" v-if="productList == null")>暂无数据</div>
	<div class="product-content">
		<div class="product-classify" v-for="product in productList">
			<div class="product-title">
				<img src="/Template/images/icon-lefthint.png" alt="">
				<span style="height: 2rem">{{product.product_name}}</span>
				<button class="buy-now active" v-on:click="order(product.product_id)" v-if="product.is_finished == 1">立即购买</button>
				<button class="order active" v-on:click="booking(product.product_id)" v-if="product.is_finished == -1">定制预约</button>
			</div>
			<div class="line"></div>
			<div class="product-exihibate">
				<ul>
					<li class="item" v-on:click="productDetail(desc.desc_id)" v-for="desc in product.desc_list">
						<img class="product-pic" src="{{desc.title_image}}" alt="">
						<p class="product-name">{{desc.title}}</p>
						<p class="product-aims">{{desc.second_title}}</p>
					</li>
				</ul>
			</div>

		</div>
	</div>
</div>
<include file="./Template/footer.html" />

